<template>
	<div class="singular-fabric">
		<el-form :model="addFabricForm" :rules="addFabricFormRules" ref="addFabricForm" label-width="120px">
				<el-form-item label="面料图:" class="upload-box" prop="image">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " multipleaccept="image/*" > <img v-if="addFabricForm.image" :src="addFabricForm.image" class="preview-img" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
				</el-form-item>
					<el-form-item label="面料型号:" prop="fabric_sn"><el-input v-model="addFabricForm.fabric_sn" placeholder="请输入面料型号" clearable></el-input></el-form-item>
					<el-form-item label="面料分类:" prop="image_class_id">
						<el-select v-model="addFabricForm.image_class_id" clearable>
							<el-option v-for='(data,index) in sortList' :key="index" :label="data.class_name" :value="data.class_id">{{data.class_name}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="排序:" prop="sort"><el-input v-model="addFabricForm.sort" placeholder="请输入排序" clearable></el-input></el-form-item>
					<el-form-item label="状态:" prop="status"><el-switch v-model="addFabricForm.status" :active-value="0" :inactive-value="1"></el-switch></el-form-item>
		</el-form>
		<el-button @click="cancel()">取 消</el-button>
		<el-button type="primary" @click="addFabricClick('addFabricForm')">确 定</el-button>
	</div>
</template>

<script>
export default {
	props: {
		layerid: {
			type: String,
			default: ''
		},
		type: {
			type: Number,
			default: 0
		},
		info: Object
	},
	data() {
		return {
			factory_id: localStorage.getItem('factory_id'),
			addFabricForm: {
				fabric_sn: '',
				sort: '',
				status: 0,
				image: '',
				is_factory: 1,
				image_class_id: ''
			}, // 添加面料的信息
			addFabricFormRules: {
				sort: [{ required: true, message: '请输入排序' }],
				image: [{ required: true, message: '请上传面料图片' }],
				image_class_id: [{ required: true, message: '请选择面料分类' }]
			},
			sortList: []
		};
	},
	methods: {
		init() {
			if (this.type == 1) {
				this.addFabricForm = this.info;
				if(this.addFabricForm.image_class_id==0){
					this.addFabricForm.image_class_id = ''
				}
			}
			let id = this.$route.query.id;
			if (id != undefined) {
				this.factory_id = id;
				delete this.addFabricForm.is_factory;
			}else{
				this.factory_id = localStorage.getItem('factory_id')
				id = this.factory_id;
			}
			this.$http(this.$ApiList.FactoryImageClassList,{factory_id: id}).then(res => {
				this.sortList = res.datas
			})
		},
		// 图片上传
		upload(params) {
			//console.log(params);
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt5MB = file.size / 1024 <= 5024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt5MB) {
				this.$message.error('图片不能大于5M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.addFabricForm.image = res.datas[0];
			});
		},
		addFabricClick(formName) {
			this.addFabricForm.type = 3;
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.type == 0) {
						this.addFabricForm.factory_id = this.factory_id;
						this.$http(this.$ApiList.UpFactoryImage, this.addFabricForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					} else {
						let id = this.$route.query.id;
						if (id == undefined) {
							this.addFabricForm.is_factory = 1;
						}
						delete this.addFabricForm.add_time;
						delete this.addFabricForm.update_time;
						delete this.addFabricForm.status_name;
						delete this.addFabricForm.type;
						this.$http(this.$ApiList.UpdateFactoryImage, this.addFabricForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		cancel() {
			this.$layer.close(this.layerid);
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.singular-fabric {
		padding: 20px 20px;
	.el-upload , .preview-img{
		width: 300px;
		height: 200px;
	}
	.el-icon-plus {
		line-height: 200px;
		font-size: 60px;
	}
}
</style>
